<template>
	<view class="container">
		<!-- 电池列表 -->
		<!-- 		<view class="battery">
			<view class="battery_item" :class="item_id == item.id ? 'active' : ''" v-for="(item, index) in list" :key="item.id">
				<image v-if="item.use_state == 0" src="/static/img/index/true.png" mode="widthFix"></image>
				<image v-if="item.use_state == 1" src="/static/img/index/false.png" mode="widthFix"></image>
				{{ item.item_code }}
			</view>
		</view> -->
		<!-- 新电池样式 -->
		<view class="battery-wrap">
			<view class="top s-flex-r-b-c">
				<view class="tit">
					选择租借设备
				</view>
				<view class="">
					<image @click="go('/pages/index/index')" class="icon" src="/static/img/status/home.png"
						mode="widthFix"></image>
					<image @click="go('/pages/user/user')" style="margin-left: 28rpx;" class="icon"
						src="/static/img/status/avatar.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="cont s-flex-c-s-c">
				<view class="name">
					电池加浮板
				</view>
				<view class="box s-flex-r-s-c">
					<image class="icon" src="/static/img/status/lan.png" mode="widthFix"></image>
					<image class="icon" src="/static/img/status/hong.png" mode="widthFix" style="margin-left: 16rpx;">
					</image>
				</view>
			</view>
		</view>
		<!-- 计价规则 -->
		<view class="rule">
			<view class="rule-title">
				计费规则
			</view>
			<view class="valuation" v-for="(item, index) in mentInfo.cacl_rule" :key="index">{{ item }}</view>
			<view class="" style="padding:10upx 20upx 20upx;text-align: left;">{{ mentInfo.yajin_rule }}</view>
		</view>

		<!-- 底部按钮begin -->
		<!-- 没有手机号，显示 取用 一个按钮 -->
		<view class="btn" v-if="!isPhone">
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="btn-blue">取用</button>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<button open-type="getAuthorize" @getAuthorize="getPhoneInfo" @error="onAuthError" scope="phoneNumber"
				class="btn-blue">取用</button>
			<!-- #endif -->
		</view>
		<!-- 有手机号，有订单 显示 取用（倒计时） 归还 两个按钮 -->
		<view class="getReturn" v-if="isLogin && isOrder && isPhone">
			<button class="dep-btn btn2" v-if="getLoading">取用</button>
			<button v-else type="default" class="get" style="width: 80%;" @click="get" :disabled="isBtn"
				:class="{ btn2: isBtn == true }">
				取用
				<text v-if="isBtn">({{ timer }}s)</text>
			</button>
			<!-- <button type="default" class="return" @click="toHuan">归还</button> -->
		</view>

		<!-- 有手机号，无订单 显示 取用 一个按钮 -->
		<view class="dep-box" v-if="isLogin && !isOrder && isPhone && isShowDep">
			<view class="dep-con" v-if="CanUseType==1">
				<button @click="payscore" class="dep-btn">免押金租借</button>
				<view class="dep-tip">
					<image src="../../static/img/user/zhifufen.png" mode="widthFix"></image>
					<text>微信支付分 | 550分及以上优享</text>
				</view>
			</view>
			<view class="dep-con" v-if="CanUseType==0">
				<button v-if="is_deposit==0" @click="navToDeposit" class="dep-btn">在线支付押金</button>
				<block v-else>
					<button class="dep-btn btn2" v-if="getLoading">取用</button>
					<button @click="judge(0)" class="dep-btn " v-else>取用</button>
				</block>
			</view>
		</view>

		<!-- 底部按钮end -->

		<!-- 订单列表弹出层 -->
		<view class="mask" v-if="order" @click="excel">
			<scroll-view scroll-y="true" class="order" @click.stop="!excel">
				<view class="list_item" v-for="(item, index) in orderList" :key="index">
					<view class="left">
						<view class="img">
							<image src="/static/img/detail/Battery.png" mode="widthFix"></image>
						</view>
						<view class="item_l">
							<text v-if="item.is_pay == 0">使用中</text>
							<text v-if="item.is_pay == 1">{{ item.use_time }}</text>
							<view>
								<text class="tip">{{ item.device_item_code }}</text>
								<text class="tip">{{ item.device_info_code }}</text>
							</view>
							<text class="time">{{ item.start_time_date }}</text>
						</view>
					</view>
					<view class="item_r huan" v-if="item.is_end == 0" @click="getReturn(item.order_id)">归还</view>
					<view class="item_r toPay" v-if="item.is_end == 1" @click="toDetail(item.order_sn)">未支付</view>
				</view>
			</scroll-view>
		</view>
		<!-- 错误提示框-->
		<view class="mask" v-if="error">
			<view class="pay">
				<view class="tit">温馨提示</view>
				<view class="con" v-html="msg"></view>
				<view class="button">

					<button type="default" class="exit btn2" v-if="countDown >0">{{countDown}}s确定</button>
					<button type="default" class="exit" @click="close" v-else>确定</button>
				</view>
			</view>
		</view>
		<!-- 未登录提示框 -->
		<view class="mask" v-if="!isLogin">
			<view class="login">
				<view class="bgc">
					<image class="bgc_img" src="/static/img/index/login-bgc.png" mode="widthFix"></image>
					<image class="img_login" src="/static/img/index/login.png" mode="widthFix"></image>
				</view>

				<view class="btn_login">
					<view class="tit">您还没有登录</view>
					<view class="tips">登录即刻开启快乐生活</view>

					<!-- #ifdef MP-WEIXIN -->
					<button @click="bindgetuserinfo" class="btn1">立即登录</button>
					<!-- #endif -->

					<!-- #ifdef MP-ALIPAY -->
					<button @click="bindAuthorizeinfo" @error="onAuthError">立即登录</button>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<uni-popup ref="popupDeposit">
			<view class="dep-box-popup">
				<view class="dep-con">
					<button @click="navToDeposit" class="dep-btn">在线支付押金</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		wxLogin,
		isusezhifufen,
		getBattery,
		payList,
		getMent,
		ment,
		isdeposit,
		backBattery,
		apilyLogin,
		wxgetPhone,
		apilygetPhone,
		isOrder,
		wxScorePay
	} from '../../api/api.js';
	export default {
		data() {
			return {
				isGet: false,
				huan: false,
				error: false,
				isNormal: true,
				CanUseType: 1, //1=使用支付分免押金 =0 使用押金充值支付
				isPhone: true,
				countDown: '',
				msg: '该设备取用配比已达上限，请使用其他设备。',
				order: false, //是否显示订单列表弹出层
				isOrder: false,
				code: '',
				isLogin: false,
				is_deposit: 0, // 是否支付押金 1支付 0未支付
				timer: 5,
				isBtn: false,
				list: [],
				orderList: [],
				intervalPay: '',
				item_id: '',
				isGetBattery: false, //点击取用按钮，取用按钮是否置灰
				wxpay: [],
				mentInfo: {}, //设备详情
				isShowDep: true, //是否显示底部押金按钮
				isPopDep: false, //是否押金弹窗
				isAutoJudge: false,
				getLoading: false
			};
		},
		onLoad(options) {
			// 通过支付宝扫码进入
			// #ifdef MP-ALIPAY
			let url = decodeURIComponent(uni.getStorageSync('alipayUrl'));
			if (url) {
				this.code = url.split('=')[1];
			}
			// #endif
			// 通过微信的扫码进入
			if (options.q) {
				let obj = {};
				let code = decodeURIComponent(options.q);
				if (code.indexOf('?') != -1) {
					let index = code.indexOf('?');
					code = code.substring(index + 1, code.length);
					code = code.split('&');
					code.forEach(v => {
						let arr = v.split('=');
						obj[arr[0]] = arr[1];
					});
					this.code = obj.code;
				}
			}
			// 通过首页扫码进入
			if (options.code) {
				this.code = options.code;
			}

			let token = uni.getStorageSync('token');
			let phone = uni.getStorageSync('user').mobile;
			let phone1 = uni.getStorageSync('user').ali_mobile;
			if (token) {
				this.isLogin = true;
			}
			if (phone) {
				this.isPhone = true;
			}
			if (phone1) {
				this.isPhone = true;
			}
			this.getMentDetail();
			this.getConfig();
			this.getCanUseType();
		},
		onShow() {
			console.log("uni.getStorageSync('isAutoJudge')", uni.getStorageSync('isAutoJudge'))
			if (uni.getStorageSync('isAutoJudge') == 1) {
				this.isAutoJudge = 1;
				uni.removeStorageSync('isAutoJudge')

			}
			console.log('isAutoJudge', this.isAutoJudge)
			if (this.isLogin) {
				this.order = false;
				payList().then(res => {
					const data = res.data.filter(item => item.is_end == 1);
					if (data.length > 0) {
						uni.showModal({
							title: '提示',
							content: '您有未支付的订单，请先去进行支付后在进行取用！',
							showCancel: false,
							confirmText: "去支付",
							success: (showres) => {
								if (showres.confirm) {
									uni.navigateTo({
										url: '/pages/detail/detail?order_sn=' + res.data[0]
											.order_sn
									});
									// this.getBattery(is_zhifufen);
								} else if (showres.cancel) {
									return;
								}
							}

						})
					} else {

						// this.order = true
						// this.isOrder = true;
						// this.orderList = res.data;
					}
				});
				this.getOrder();
				// this.getPayList();
			}
			// this.openIntervalPay();
		},
		onHide() {
			this.clearIntervalPay();
		},
		onUnload() {
			this.clearIntervalPay();
		},
		methods: {
			go(url) {
				uni.navigateTo({
					url,
				})
			},
			// 获取取用条件类型 支付分 和押金
			getCanUseType() {
				isusezhifufen().then(res => {
					this.CanUseType = res.data.state
					console.log('this.CanUseType: ', this.CanUseType)
				});
			},
			calculation() {
				let mentInfo = JSON.stringify(this.mentInfo);
				uni.navigateTo({
					url: `/pages/ment/calculation?mentInfo= ${mentInfo}`
				});
			},
			openIntervalPay() {
				// 五秒钟查询一次订单状态
				this.intervalPay = setInterval(() => {
					if (this.isLogin) {
						this.getPayList();
					}
				}, 5000);
			},
			clearIntervalPay() {
				if (this.intervalPay) {
					console.log('清除轮询2');
					clearInterval(this.intervalPay);
				}
			},
			// 微信登录授权
			bindgetuserinfo() {
				uni.getUserProfile({
					desc: '正在获取',
					success: info => {
						uni.login({
							success: res => {
								let data = {
									rawData: info.rawData,
									code: res.code,
									iv: info.iv
								};
								wxLogin(data).then(res => {
									if (res.code == 1) {
										uni.showToast({
											icon: 'none',
											title: '授权成功'
										});
										this.isLogin = true;
										uni.setStorageSync('user', res.data.userInfo);
										uni.setStorageSync('token', res.data.userInfo
											.token);
										// 判断是否有手机号
										let phone = uni.getStorageSync('user').mobile;
										if (phone) {
											this.isPhone = true;
										}
										// 判断是否支付押金
										this.getOrder();
									}
								});
							}
						});
					},
					fail: e => {
						console.log(e);
					}
				});
			},
			// 微信获取手机号
			onGetPhoneNumber(e) {
				if (!uni.getStorageSync('user').mobile && e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.login({
						success: res => {
							wxgetPhone({
								code: res.code,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										icon: 'none',
										title: '获取手机号成功'
									});
									this.isPhone = true;
								}
							});
						}
					});
				} else {
					// console.log(e, '用户点击了拒绝');
				}
			},
			// 支付宝登录授权
			bindAuthorizeinfo() {
				my.getAuthCode({
					scopes: ['auth_user'],
					success: res => {
						apilyLogin({
							authCode: res.authCode
						}).then(res => {
							if (res.code == 1) {
								uni.showToast({
									icon: 'none',
									title: '授权成功'
								});
								this.isLogin = true;
								uni.setStorageSync('user', res.data.userinfo);
								uni.setStorageSync('token', res.data.userinfo.token);
								// 判断是否有手机号
								let phone1 = uni.getStorageSync('user').ali_mobile;
								if (phone1) {
									this.isPhone = true;
								}
								// 判断是否支付押金
								this.getOrder();
							}
						});
					}
				});
			},
			openCountDown() {
				let timer = null
				let num = 5;
				this.countDown = 5
				timer = setInterval(() => {
					if (num == 1) {
						clearInterval(timer)
						this.countDown = 0;
						this.go("/pages/index/index")
					} else {
						this.countDown = num
						num--
					}

				}, 1000)
			},
			// 支付宝获取手机号
			getPhoneInfo() {
				my.getPhoneNumber({
					scopes: 'auth_user',
					success: res => {
						var resData = JSON.parse(res.response);
						apilygetPhone({
							encrypt: resData.response
						}).then(res => {
							if (res.code == 1) {
								uni.showToast({
									icon: 'none',
									title: '获取手机号成功'
								});
								this.isPhone = true;
							}
						});
					},
					fail: res => {}
				});
			},
			onAuthError(e) {
				console.log(e);
			},
			// 获取是否支付押金
			getOrder() {
				isdeposit().then(res => {
					this.is_deposit = res.data.is_deposit;
					console.log('isdeposit', this.isAutoJudge, this.is_deposit)
					if (this.isAutoJudge == 1 && this.is_deposit == 1) {
						this.judge()
					}
				});
			},
			// 获取电池列表
			getMentDetail() {
				getMent({
					code: this.code
				}).then(res => {
					if (res.data.state == 0) {
						this.error = true;
						this.msg = '该设备已离线，请使用其他设备。';
					} else {
						this.mentInfo = res.data;
						this.list = res.data.device_item;
						if (this.list.findIndex(i => i.use_state == 0) == -1) {
							this.isNormal = false;
						}
					}
				});
			},
			// 订阅信息
			dingyueComfirm(tmplId, callback) {
				wx.showModal({
					title: '订阅消息',
					content: '亲，请同意飞鱼浮会向您发送订单信息！。',
					success: res => {
						if (res.confirm) {
							wx.requestSubscribeMessage({
								tmplIds: [tmplId],
								success: res => {
									if (res[tmplId] === 'accept') {
										wx.showToast({
											title: '订阅成功！',
											icon: 'success'
										})
										if (callback) {
											callback()
										}
									} else if (res[tmplId] == 'reject') {
										//引导用户，手动引导用户点击按钮，去设置页开启，## Modals是自定义组件
										wx.showModal({
											title: '订阅消息',
											content: '您当前拒绝接受消息通知，是否去开启',
											confirmText: '开启授权',
											confirmColor: '#345391',
											cancelText: '仍然拒绝',
											cancelColor: '#999999',
											success(res) {
												if (res.confirm) {
													console.log('用户点击确定')
													wx.openSetting({
														success(res) {
															console.log(res
																.authSetting
															)
														},
														fail(err) {
															//失败
															console.log(err)
														}
													})
												} else if (res.cancel) {
													console.log('用户点击取消')
													if (callback) {
														callback()
													}
												}
											}
										})
									}
								},
								fail(err) {
									//失败
									console.log(err)
								}
							})
						} else {
							console.log('提示：用户拒绝订阅消息')
							if (callback) {
								callback()
							}
						}
					}
				})
			},
			// 底部按钮，取用
			get() {
				const that = this;
				const tmplId = 'XVlMKriAnLAOERVa5r85_OYky5LXtXYgyE0HfenXA-8'
				that.auditSubscriptionsSetting(tmplId, () => {
						if (!that.isNormal) {
							that.error = true;
							that.msg = '该设备暂无使用电池，请选择其他设备';
							return;
						}
						// 判断没有支付押金
						if (that.is_deposit == 0) {
							// 判断是否为微信，支付宝走原来的逻辑
							// #ifdef MP-WEIXIN
							that.$refs.popupDeposit.open();
							// #endif
							// #ifdef MP-ALIPAY
							uni.showToast({
								icon: 'none',
								title: '请支付押金'
							});
							setTimeout(() => {
								that.navToDeposit();
							}, 500);
							// #endif
							return;
						}
						that.judge();
					})
		},
		judge(is_zhifufen) {
			if (this.getLoading) {
				return;
			}
			this.getLoading = true;
			isOrder({}).then(res => {
				if (res.data.is_order == 1) {
					uni.showModal({
						title: '提示',
						content: res.msg,
						success: res => {
							if (res.confirm) {
								this.getLoading = true;
								this.getBattery(is_zhifufen);
							} else if (res.cancel) {
								this.getLoading = false;
								return;
							}
						}
					});
				} else if (res.data.is_order == 0) {
					this.getLoading = true;
					this.getBattery(is_zhifufen);
				}
			}).catch(() => {
				this.getLoading = false;
			}).finally(() => {

			});
		},
		// 跳转到押金支付
		navToDeposit() {
			const that = this;
			const tmplId = 'XVlMKriAnLAOERVa5r85_OYky5LXtXYgyE0HfenXA-8'
			this.auditSubscriptionsSetting(tmplId, () => {
				uni.navigateTo({
					url: `/pages/deposit/deposit?isAutoJudge=1&code=${that.code}`
				});
			})
			// uni.requestSubscribeMessage({
			// 	tmplIds: ['XVlMKriAnLAOERVa5r85_OYky5LXtXYgyE0HfenXA-8'],
			// 	success(res) {
			// 		console.log(res)
			// 		uni.navigateTo({
			// 			url: `/pages/deposit/deposit?isAutoJudge=1&code=${that.code}`
			// 		});
			// 	}
			// })

		},
		payscore() {
			console.log('qqq=============');
			if (wx.openBusinessView) {
				wxScorePay({
					code: this.code
				}).then(res => {
					if (res.data.length == 0) {
						this.wxpay = [];
					} else {
						console.log('ok========openBusinessView=  ====');
						this.wxpay = res.data;

						wx.openBusinessView({
							businessType: 'wxpayScoreUse',
							extraData: {
								mch_id: this.wxpay.mch_id,
								package: this.wxpay.package,
								timestamp: this.wxpay.timestamp,
								nonce_str: this.wxpay.nonce_str,
								sign_type: this.wxpay.sign_type,
								sign: this.wxpay.sign
							},
							envVersion: 'release',
							success: res => {
								console.log('========微信支付分支付成功success========');
								console.log(res);
								if (res.extraData.appid && res.extraData.query_id) {
									this.judge(1);
								} else {
									this.$refs.popupDeposit.open();
								}
							},
							fail: (err) => {
								console.log('========fail========');
								console.log(err);
								this.$refs.popupDeposit.open();
							},
							complete: () => {
								console.log('========complete========');
								this.isShowDep = false;
							}
						});
					}
				});
			}
		},
		getBattery(is_zhifufen) {
			// 清除轮询
			this.clearIntervalPay();
			uni.showLoading({
				title: "请稍后...",
				mask: true
				
			})
			this.getLoading = true;
			let pamars = {
			
			}
			if(is_zhifufen=='1'){
				pamars = {
					is_zhifufen: is_zhifufen,
					code: this.code,
					order_type:1
				}
			}else{
				pamars = {
					is_zhifufen: is_zhifufen,
					code: this.code
				}
			}
			getBattery(pamars).then(res => {
				console.log('取电池');
				console.log(res);
				if (res.code == 1) {
					this.error = true;
					this.openCountDown()
					this.msg =
						`<span class='title'> 浮板：</span>${res.data.item_code_wakeboard} 柜门已打开<br>电池：${res.data.item_code_battery} 柜门已打开`;
					this.huan = true;
					this.isGet = true;
					this.item_id = res.data.id;
					// this.isGetBattery = false;
					// this.getPayList();
					this.getMentDetail();
					// this.openIntervalPay();
				}
			}).finally(() => {
				this.getLoading = false;
				uni.hideLoading()
			});
		},
		// 订单弹出层，归还电池
		getReturn(order_id) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '请在柜子上面操作，点击还操作进行归还！',
				showCancel: false,
				success(res) {
					// if (res.confirm) {
					// 	backBattery({
					// 		order_id: order_id,
					// 		code: that.code
					// 	}).then(res => {
					// 		console.log('归还电池');
					// 		console.log(res);
					// 		if (res.code == 1) {
					// 			that.error = true;
					// 			that.msg = '柜门已打开，请归还';
					// 			that.huan = true;
					// 			that.getPayList();
					// 		}
					// 	});
					// } else if (res.cancel) {
					// 	// console.log('用户点击取消');
					// }
				}
			});
		},
		// 订单列表
		getPayList() {
			console.log('getPayList2:');
			payList().then(res => {
				if (res.data.length == 0) {
					this.isOrder = false;
				} else {
					// this.order = true
					this.isOrder = true;
					this.orderList = res.data;
				}
			});
		},

		//底部按钮 归还
		toHuan() {
			this.order = true;
		},
		excel(e) {
			this.order = false;
		},
		close() {
			this.error = false;
			uni.switchTab({
				url: '/pages/index/index'
			});
			// if (this.huan) {
			// 	this.isOrder = true;
			// } else {
			// 	uni.reLaunch({
			// 		url: '/pages/index/index'
			// 	});
			// }
			// if (this.isGet) {
			// 	this.isBtn = true;
			// 	let timer1 = setInterval(() => {
			// 		this.timer--;
			// 		if (this.timer == -1) {
			// 			clearInterval(timer1);
			// 			this.timer = 5;
			// 			this.isGet = false;
			// 			this.isBtn = false;
			// 		}
			// 	}, 1000);
			// }
		},
		toDetail(order_sn) {
			uni.navigateTo({
				url: '/pages/detail/detail?order_sn=' + order_sn
			});
		},
		getConfig() {
			ment().then(res => {
				uni.setStorageSync('config', res.data);
			});
		},
		auditSubscriptionsSetting(tmplId, callback) {
			const that = this;
			wx.getSetting({
				withSubscriptions: true,
				success(res) {
					console.log(res)
					if (res.subscriptionsSetting && res.subscriptionsSetting.mainSwitch) {
						if (
							res.subscriptionsSetting.itemSettings &&
							res.subscriptionsSetting.itemSettings[tmplId]
						) {
							let item = res.subscriptionsSetting.itemSettings[tmplId]
							if (item == 'reject') {
								console.log('提示：用户拒绝订阅消息')
								that.dingyueComfirm(tmplId, callback)
							} else if (item == 'accept') {
								console.log('提示：您已经开启订阅消息')
								if (callback) {
									callback()
								}
							} else if (item == 'ban') {
								console.log('提示：您已经被后台封禁')
								if (callback) {
									callback()
								}
							}
						} else {
							console.log('提示：用户没有勾选订阅消息或者没有状态')
							that.dingyueComfirm(tmplId, callback)
						}
					} else {
						console.log('提示：订阅消息主开关没打开')
						that.dingyueComfirm(tmplId, callback)
					}
				}
			})
		}
	}
	};
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		//height: calc(100% - 10upx);
		padding-top: 20rpx;
		background-color: #f6f6f6;
		padding-bottom: 160upx;
	}

	.battery-wrap {
		width: calc(100% - 60upx);
		background-color: #ffffff;
		margin: 0 auto;
		margin-bottom: 16rpx;
		padding-bottom: 10rpx;

		.top {
			padding: 24rpx 18rpx 30rpx;

			.tit {
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
				line-height: 47rpx;
				text-align: left;
			}

			.icon {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.cont {
			width: 274rpx;
			height: 300rpx;
			box-sizing: border-box;
			background: #F6F6F6;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			border: 1rpx solid #74ABC9;
			padding: 8rpx 10rpx 20rpx;

			.name {
				font-weight: bold;
				font-size: 34rpx;
				color: #000000;
				line-height: 40rpx;
				margin-bottom: 40rpx;
			}

			.box {
				.icon {
					width: 118rpx;
					height: 190rpx;
				}
			}
		}
	}

	.battery {
		width: calc(100% - 60upx);
		height: 900upx;
		margin: 0 auto;
		display: flex;
		flex-flow: column;
		flex-wrap: wrap;

		.battery_item {
			background-color: #ffffff;
			box-sizing: border-box;
			width: 33.33%;
			height: 178upx;
			border: 1upx solid #f6f6f6;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 25%;
			}

			&.active {
				background-color: rgba(62, 185, 255, 0.5);
			}
		}
	}

	.getReturn {
		width: calc(100% - 60upx);
		height: 90upx;
		position: fixed;
		bottom: 50upx;
		left: 30upx;
		display: flex;
		justify-content: space-around;

		button {
			width: 40%;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			color: #ffffff;
			border-radius: 45upx;
		}

		.get {
			background-color: #3fb8ff;
		}

		.return {
			background-color: #fb8200;
		}
	}

	.btn2 {
		background-color: #c0c0c0 !important;
	}

	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 99;
		background: rgba($color: #000000, $alpha: 0.3);
		display: flex;
		align-items: center;
		justify-content: center;

		.pay {
			width: 580upx;
			min-height: 340upx;
			padding: 10upx 30upx 30upx;
			background: #ffffff;
			border-radius: 12px;
			position: relative;

			.tit {
				width: 100%;
				text-align: center;
				margin: 30upx auto 30upx;
			}

			.con {
				width: 80%;
				margin: 0 auto;
				color: #666;
				text-align: center;
			}

			.button {
				margin-top: 45upx;
				display: flex;
				justify-content: center;

				button {
					width: 200upx;
					height: 88upx;
					line-height: 88upx;
					background: #3eb9ff;
					border-radius: 44upx;
					border: 1upx solid #f2f2f2;
					color: #fff;
				}
			}
		}

		.login {
			width: 600upx;
			height: 625upx;
			background: #ffffff;
			border-radius: 20upx;

			.bgc {
				width: 100%;
				height: 285upx;
				position: relative;

				.bgc_img {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}

				.img_login {
					width: 116upx;
					height: 134upx;
					position: absolute;
					top: calc(50% - 67upx);
					left: calc(50% - 58upx);
				}
			}

			.btn_login {
				width: 90%;
				margin: 30upx auto 0;
				text-align: center;

				.tit {
					font-size: 34upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 34upx;
					margin-top: 50upx;
				}

				.tips {
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 26upx;
					margin: 30upx 0;
				}

				button {
					width: 100%;
					height: 80upx;
					background: #3199ff;
					box-shadow: 0upx 8upx 12upx 6upx rgba(0, 101, 196, 0.16);
					border-radius: 40upx;
					color: #ffffff;
					font-size: 32upx;
					line-height: 80upx;
				}

				.exit {
					margin: 30upx 0;
				}
			}
		}
	}

	.order {
		width: 580upx;
		height: 300upx;
		padding: 10upx 30upx 30upx;
		background: #ffffff;
		border-radius: 12px;
		position: relative;

		.list_item {
			width: 100%;
			height: 150upx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1upx solid #f7f7f7;

			.left {
				display: flex;
				align-items: center;

				.img {
					width: 80upx;
					height: 80upx;
					background-color: #d8efff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20upx;

					image {
						width: 50upx;
					}
				}

				.item_l {
					height: 80%;
					display: flex;
					font-size: 28upx;
					flex-direction: column;
					justify-content: space-around;

					.time {
						color: #999999;
						font-size: 24upx;
					}

					.tip {
						color: #999999;
						font-size: 24upx;
						margin-right: 10upx;
					}
				}
			}

			.item_r {
				width: 130upx;
				height: 54upx;
				border-radius: 27px;
				font-size: 26upx;
				font-weight: 500;
				text-align: center;
				line-height: 54upx;
			}

			.huan {
				background-color: #f5f5f5;
				color: #666666;
			}

			.toPay {
				background-color: #d8efff;
				color: #3eb9ff;
			}
		}
	}

	.rule {
		//top: 90upx;
		width: 90%;
		//position: fixed;
		//height: 300upx;
		bottom: 160upx;
		text-align: center;
		color: #999999;
		font-size: 26upx;
		background-color: #ffffff;
		border-radius: 30upx;
		margin: 20upx auto;
		padding-left: 18rpx;

		// left: 50%;
		// transform: translateX(-50%);
		.rule-title {
			padding-top: 26rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #000000;
			line-height: 38rpx;
			margin-bottom: 20rpx;
			text-align: left;
		}

		.valuation {
			padding: 10upx 20upx 0 0;
			text-align: left;
			// color: #3eb9ff;
			font-size: 28upx;
			//margin-bottom: 12upx;
		}

		.clear {
			width: 90%;
			height: 90upx;
			background-color: #3eb9ff;
			border-radius: 45upx;
			margin: 0 auto;
			text-align: center;
			color: #ffffff;
			line-height: 90upx;
			font-size: 32upx;
		}
	}

	.dep-box {
		height: 220rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		box-sizing: border-box;
		padding-top: 50rpx;

		.dep-title {
			text-align: center;
			line-height: 100rpx;
		}

		.dep-con {
			padding: 10rpx 30rpx;

			.dep-tip {
				width: 420rpx;
				margin: auto;
				margin-top: 10rpx;
				color: #666;
				padding: 0 30rpx 30rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;

				image {
					margin-right: 10rpx;
					width: 30rpx;
				}
			}

			.dep-btn {
				width: 80%;
				height: 88upx;
				line-height: 88upx;
				background: #3eb9ff;
				border-radius: 44upx;
				border: 1upx solid #f2f2f2;
				box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.18);
				color: #fff;

				text {
					font-size: 24rpx;
				}
			}

			.dep-btn2 {
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				border: #3eb9ff;
				color: #3eb9ff;
				border-radius: 44upx;
				border: 1upx solid #f2f2f2;
				margin-bottom: 20rpx;

				text {
					font-size: 24rpx;
				}
			}
		}
	}

	.dep-box-popup {
		width: 600rpx;
		background-color: #ffffff;
		border-radius: 20rpx;

		.dep-title {
			text-align: center;
			line-height: 100rpx;
		}

		.dep-con {
			padding: 30rpx;

			.dep-tip {
				margin-top: 10rpx;
				color: #666;
				padding: 0 30rpx 30rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;

				image {
					margin-right: 10rpx;
					width: 30rpx;
				}
			}

			.dep-btn {
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				background: #3eb9ff;
				border-radius: 44upx;
				border: 1upx solid #f2f2f2;
				color: #fff;

				text {
					font-size: 24rpx;
				}
			}
		}
	}

	.btn-blue {
		width: 90%;
		margin: auto;
		height: 88upx;
		line-height: 88upx;
		background: #3eb9ff;
		border-radius: 44upx;
		border: 1upx solid #f2f2f2;
		color: #fff;
	}
</style>
